<template>
  <view class="release-page">
    <view class="release-head">
      <view class="release-title">
        <view>标题 <view style="color: #FF5353;">*</view>
        </view>
        <view>0/25</view>
      </view>
      <view class="release-title-int">
        <u--input placeholder="请输入标题" border="none" v-model="titleValue" @change="titleChange"></u--input>
      </view>
      <view class="release-label">
        <view>简介</view>
        <view>0/40</view>
      </view>
      <view class="release-label-textarea">
        <u--textarea v-model="textareaValue" placeholder="40字以内简介" maxlength='40' count></u--textarea>
      </view>
      <view class="release-select-btn">
        <view class="select-btn">
          <u-button text="选择比赛" color="#2F7EFC" @click="onCompetition"></u-button>
        </view>
      </view>
    </view>
    <view class="release-free">
      <u-collapse @change="change" :border="false" @close="close" @open="open">
        <u-collapse-item title="免费内容" :border='false'>
          <text slot="value" class="u-page__item__title__slot-title">收起</text>
          <u--textarea v-model="freeValue" height="356rpx" placeholder="请输入免费内容，1000字以内" maxlength='1000'
            count></u--textarea>
          <view class="free-upload">
            <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
              uploadIcon="plus"></u-upload>
          </view>
        </u-collapse-item>
      </u-collapse>
    </view>
    <view class="release-free">
      <!-- todo  折叠层事件处理 -->
      <u-collapse @change="change" :border="false" @close="close" @open="open">
        <u-collapse-item title="付费内容" :border='false'>
          <text slot="value" class="u-page__item__title__slot-title">收起</text>
          <u--textarea v-model="freeValue" height="356rpx" placeholder="请输入付费内容，1000字以内" maxlength='1000'
            count></u--textarea>
          <view class="free-upload">
            <u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="1" multiple
              uploadIcon="plus"></u-upload>
          </view>
        </u-collapse-item>
      </u-collapse>
    </view>
    <view class="release-formulate">
      <view class="release-price">
        <view class="price-title">定价 <view style="color: #FF5353;">*</view>
          <view>只填写免费内容可设为0</view>
        </view>
        <view class="title-int">
          <u--input placeholder="0" border="none" v-model="priceValue" @change="priceChange"></u--input>
        </view>
      </view>
      <view class="release-els">
        <view>其他功能</view>
        <view>非必选</view>
      </view>
      <view class="release-row">
        <view class="row-top">
          <view>一键退款</view>
          <u-switch v-model="refundValue" @change="refundChange"></u-switch>
        </view>
        <view class="row-title">开启后此方案会有一件退款功能</view>
      </view>
      <view class="release-row">
        <view class="row-top">
          <view>不参与折扣</view>
          <u-switch v-model="discountValue" @change="discountChange"></u-switch>
        </view>
        <view class="row-title">开启后 此方案将不参与设置的粉丝折扣</view>
      </view>
      <view class="release-row">
        <view class="row-top">
          <view>不加入会员</view>
          <u-switch v-model="memberValue" @change="memberChange"></u-switch>
        </view>
        <view class="row-title">开启后 此方案会员也需要付费查阅</view>
      </view>
      <view class="release-shelf">
        <view class="shelf-title">定时下架</view>
        <view class="shelf-label">选择商品定时下架时间 下架后用户将不可付费购买</view>
        <view class="shelf-nav">
          <view class="shelf-timer" @click="shelfShow = true">
            <view>{{shelfValue ? shelfValue :'请选择时间'}}</view>
            <u-icon name="arrow-down-fill" color="#909090"></u-icon>
          </view>
          <view class="shelf-btn">
            <u-button text="重置" color="#2F7EFC" plain @click="shelfResetting"></u-button>
          </view>
        </view>
      </view>
      <TimerPicker :show="shelfShow" title="请选择下架时间" @onCancel="shelfCancel" @onConfirm="shelfConfirm"></TimerPicker>
      <view class="release-shelf">
        <view class="shelf-title">定时推送</view>
        <view class="shelf-label">所选时间为消息推送时间 在此时间向粉丝发起消息提醒</view>
        <view class="shelf-nav">
          <view class="shelf-timer" @click="pushShow = true">
            <view>{{pushValue ? pushValue :'请选择时间'}}</view>
            <u-icon name="arrow-down-fill" color="#909090"></u-icon>
          </view>
          <view class="shelf-btn">
            <u-button text="重置" color="#2F7EFC" plain @click="pushResetting"></u-button>
          </view>
        </view>
      </view>
    </view>
    <TimerPicker :show="pushShow" title="请选择推送时间" @onCancel="pushCancel" @onConfirm="pushConfirm"></TimerPicker>
    <view class="release-template">
      <view class="template-title">选择模版</view>
      <radio-group class="template-list">
        <view class="radio-list" v-for="item,index in 5" :key="index" @click="radioChange()">
          <view class="template-nav">
            <view class="nav-bg">
              <image src="../../../static/img/collectPage/collect.png" mode=""></image>
            </view>
            <view class="nav-radio">
              <radio :value="type" />
            </view>
          </view>
        </view>
      </radio-group>
    </view>
    <view class="release-btn">
      <u-button text="发布方案" color="#2F7EFC"></u-button>
    </view>

  </view>
</template>

<script>
  import TimerPicker from '../components/TimerPicker/index.vue'
  export default {
    components: {
      TimerPicker
    },
    data() {
      return {
        titleValue: '',
        priceValue: '',
        textareaValue: '',
        freeValue: '',
        fileList1: [],
        fileList2: [],
        shelfShow: false,
        shelfValue: '',
        pushShow: false,
        pushValue: '',
        memberValue: false, //会员
        discountValue: false, //折扣
        refundValue: true, //退款
        type: ''
      }
    },
    methods: {
      onCompetition(){
        uni.navigateTo({
          url:'/pages/specialColumnPage/expertPage/chooseCompetition'
        })
      },
      titleChange(e) {

      },
      priceChange(e) {

      },
      refundChange(e) {
        this.refundValue = e
      },
      discountChange(e) {
        this.discountValue = e
      },
      memberChange(e) {
        this.memberValue = e
      },
      shelfCancel(val) {
        this.shelfShow = val
      },
      shelfConfirm(val) {
        this.shelfValue = val
        this.shelfShow = false
      },
      shelfResetting() {
        this.shelfValue = ''
      },
      pushCancel(val) {
        this.pushShow = val
      },
      pushConfirm(val) {
        this.pushValue = val
        this.pushShow = false
      },
      pushResetting() {
        this.pushValue = ''
      }
    }
  }
</script>

<style lang="less" scoped>
  /deep/ .u-textarea {
    background: rgba(245, 245, 245);
  }

  /deep/ .u-textarea__count {
    background-color: transparent !important;
  }

  .release-head {
    width: 750rpx;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    margin-top: 30rpx;
    box-sizing: border-box;
    padding: 30rpx;

    .release-title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      :first-child {
        display: flex;
      }

      :last-child {
        font-size: 32rpx;
        font-weight: 500;
        color: #909090;
      }
    }

    .release-title-int {
      margin-top: 18rpx;
      height: 74rpx;
      background: rgba(245, 245, 245);
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      padding-left: 20rpx;
    }

    .release-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #313131;

      :last-child {
        color: #909090;
      }
    }

    .release-label-textarea {
      margin-top: 18rpx;


    }

    .release-select-btn {
      margin-top: 20rpx;
      display: flex;
      justify-content: flex-end;

      .select-btn {
        width: 220rpx;
        height: 74rpx;
      }
    }
  }

  .release-free {
    width: 750rpx;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    padding: 30rpx;
    box-sizing: border-box;
    margin-top: 20rpx;

    .free-upload {
      margin-top: 20rpx;
    }
  }

  .release-formulate {
    margin-top: 20rpx;
    width: 750rpx;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    box-sizing: border-box;
    padding: 30rpx;

    .release-price {

      .price-title {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        opacity: 1;

        :last-child {
          font-size: 24rpx;
          font-weight: 500;
          color: #909090;
        }
      }

      .title-int {
        margin-top: 18rpx;
        height: 84rpx;
        background: rgba(245, 245, 245);
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        padding-left: 20rpx;
      }
    }

    .release-els {
      display: flex;
      align-items: center;
      height: 94rpx;
      width: 100%;
      border-bottom: 4rpx solid #e6e6e6;

      :first-child {
        font-size: 32rpx;
        font-weight: 500;
        color: #313131;
      }

      :last-child {
        font-size: 24rpx;
        font-weight: 500;
        color: #909090;
        margin-left: 10rpx;
      }
    }

    .release-row {
      height: 116rpx;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .row-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 32rpx;
        font-weight: 500;
        color: #313131;
      }

      .row-title {
        font-size: 24rpx;
        font-weight: 500;
        color: #909090;
        margin-top: 8rpx;
      }
    }

    .release-shelf {
      height: 210rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .shelf-title {
        font-size: 32rpx;
        font-weight: 500;
        color: #313131;
      }

      .shelf-label {
        font-size: 24rpx;
        font-weight: 500;
        color: #909090;
        margin-top: 8rpx;

      }

      .shelf-nav {
        margin-top: 10rpx;
        display: flex;
        justify-content: space-between;

        .shelf-timer {
          width: 472rpx;
          height: 84rpx;
          background: rgba(245, 245, 245);
          border-radius: 10rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          box-sizing: border-box;
          color: #909090;
          padding: 0 30rpx;
        }

        .shelf-btn {
          width: 198rpx;
          height: 84rpx;
        }
      }
    }

  }

  .release-template {
    width: 750rpx;
    height: 526rpx;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(161, 161, 161, 0.16);
    margin-top: 20rpx;
    box-sizing: border-box;
    padding: 30rpx;

    .template-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #313131;
    }

    .template-list {
      display: flex;
      margin-top: 20rpx;
      overflow-x: auto;
      white-space: nowrap;
      width: 100%;

      .template-nav {
        width: 194rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
        position: relative;

        .nav-bg {
          width: 194rpx;
          border-radius: 10rpx;

          image {
            width: 194rpx;
            height: 212rpx;
            border-radius: 10rpx;
          }
        }

        .nav-radio {
          position: absolute;
          top: 14rpx;
          right: 14rpx;
        }
      }
    }
  }

  .release-btn {
    display: flex;
    align-items: center;
    width: 750rpx;
    height: 154rpx;
    background: rgba(255, 255, 255);
    box-shadow: 0rpx 2rpx 20rpx rgba(0, 0, 0, 0.16);
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;
    padding: 0 62rpx;
  }
</style>